<template>
  <div class="add-goods-recommend">
    <el-form label-position="right" label-width="80px" :model="goodsRecommend">
      <el-form-item label="商品编号">
        <el-input v-model="goodsRecommend.spuNo" readonly></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="goodsRecommend.spuName" readonly>
          <template slot="append">
            <i class="el-icon-search" @click="handleDialogVisible"></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-image :src="goodsRecommend.spuImage"/>
      </el-form-item>
      <el-form-item label="推荐形式">
        <el-select v-model="goodsRecommend.type">
          <el-option v-for="item in homeGoodsTypeOptions" :key="item.value"
                     :label="item.label"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="显示序号">
        <el-input v-model="goodsRecommend.sortNo"></el-input>
      </el-form-item>
      <el-form-item label="推荐词">
        <el-input type="textarea" v-model="goodsRecommend.reason" :maxlength="255"></el-input>
      </el-form-item>
    </el-form>
    <el-dialog
      title="选择商品"
      :visible.sync="dialogParams.visible"
      width="30%"
      append-to-body
      :before-close="handleDialogVisible">
      <select-goods ref="selectGoodsRef"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogVisible">取 消</el-button>
        <el-button type="primary" @click="handleDoSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SelectGoods from './select-goods'

export default {
  name: 'add-goods-recommend',
  props: {
    params: Object
  },
  components: {SelectGoods},
  data() {
    return {
      goodsRecommend: {
        spuNo: null,
        spuName: null,
        type: null,
        spuImage: null,
        reason: null,
        sortNo: null
      },
      dialogParams: {
        visible: false
      },
      homeGoodsTypeOptions: [
        {value: 'firstLevel', label: '一级'},
        {value: 'secondLevel', label: '二级'}
      ]
    }
  },
  watch: {
    params: {
      handler() {
        if (this.params) {
          this.goodsRecommend = this.params
        } else {
          this.clearData()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    doSure() {
      let url = '/mall/homegoods/save'
      if (this.params) {
        url = '/mall/homegoods/update'
      }
      return this.$http({
        url: this.$http.adornUrl(url),
        method: 'post',
        data: this.$http.adornData(this.goodsRecommend),
      })
    },
    handleDialogVisible() {
      this.dialogParams.visible = !this.dialogParams.visible
    },
    handleDoSure() {
      const result = this.$refs['selectGoodsRef'].doSure()
      this.goodsRecommend.spuNo = result.serialNo
      this.goodsRecommend.spuImage = result.defaultImage
      this.goodsRecommend.spuName = result.name
      this.handleDialogVisible()
    },
    clearData() {
      this.goodsRecommend = {
        spuNo: null,
        spuName: null,
        type: null,
        spuImage: null,
        reason: null,
        sortNo: null
      }
    }
  }
}
</script>

<style scoped>

</style>
